<template>
	<view id="content-appli">
		<view class="content-form">
			<!-- <view class="input-item">
				<text class="tit">联系人</text>
				<input type="text" :value="name" placeholder="请输入联系人姓名" maxlength="11" data-key="name" @input="inputChange" />
			</view>
			<view class="input-item">
				<text class="tit">手机号码</text>
				<input type="number" :value="mobile" placeholder="请输入联系人手机号码" maxlength="11" data-key="mobile" @input="inputChange" />
			</view> -->
			
			<view class="apply-row">
				<view class="h6">联系人</view>
				<view class="apply-in">
					<input type="text" v-model="formObj.linkman" placeholder="请输入真实姓名" placeholder-style="color:#CBCBCB;" />
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">手机号码</view>
				<view class="apply-in">
					<input type="digit" v-model="formObj.linkPhone" placeholder="请输入手机号码" placeholder-style="color:#CBCBCB;" />
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">营业执照 (上传清晰、无模糊的图)</view>
				<view class="apply-img" @click="chooseImgs(1)">
					<view class="imgs" v-show="formObj.business_license">
						<image class="up-img" :src="formObj.business_license" mode=""></image>
						<image src="/static/icon/icon_delect11.png" @click.stop="clearImg(1)" class="close-icon" mode=""></image>
					</view>
					<view v-show="!formObj.business_license" class="add-img" >
						<image src="/static/icon/add_icon_01.png" class="add-icon" mode=""></image>
						<text>上传图片</text>
					</view>
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">店面门头</view>
				<view class="apply-img" @click="chooseImgs(2)">
					<view class="imgs" v-show="formObj.head_image">
						<image class="up-img" :src="formObj.head_image" mode=""></image>
						<image src="/static/icon/icon_delect11.png" @click.stop="clearImg(2)" class="close-icon" mode=""></image>
					</view>
					<view v-show="!formObj.head_image" class="add-img" >
						<image src="/static/icon/add_icon_01.png" class="add-icon" mode=""></image>
						<text>上传图片</text>
					</view>
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">品牌产品  (上传产品图 <=3)</view>
				<view class="apply-wrap" >
					<view class="apply-img" v-for="(img,k) in imgArr" :key="k" @click="chooseImgs(3)">
						<view class="imgs"  >
							<image class="up-img" :src="img" mode=""></image>
							<image src="/static/icon/icon_delect11.png" @click.stop="imgArr.splice(k,1)" class="close-icon" mode=""></image>
						</view>
					</view>							
					<view v-if="imgArr.length < 3" class="apply-img" @click="chooseImgs(3)">
						<view  class="add-img" >
							<image src="/static/icon/add_icon_01.png" class="add-icon" mode=""></image>
							<text>上传图片</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="application" @click="submit">提交申请</view>
	</view>
</template>

<script>
	import { apiroot } from '@/siteInfo.js'
	export default {
		data() {
			return {
				name: '',
				mobile: '',
				formObj: {
					business_license: '', // 营业执照
					head_image: '', // 门头照
					product_image: '', // 产品图
					linkman: '',
					linkPhone: '',
				},
				imgArr: [],
			}
		},
		methods: {
			// 上传图片
			chooseImgs(type){
				var that = this;
				let count = type == 3?3:1;
				uni.chooseImage({
					count:type == 3?count - that.imgArr.length:count,
					success: (filePaths) => {
						console.log(filePaths)
						var imgArr = filePaths.tempFilePaths;
						let index = 0;
						let length = filePaths.tempFilePaths.length;
						downImgs();
						function downImgs(){
							that.$Request.upload({
								url: '/api/barter/uploadImg',
								filePath: imgArr[index],
								formData: null,
								name: 'headPic',
								success: (res)=>{
									// console.log(res)
									let data = JSON.parse(res.data)
									let imgSrc =  apiroot +'/'+ data.path;
									console.log(imgSrc)
									console.log(type)
									if(type == 1){
										that.formObj.business_license = imgSrc
									}else if(type ==2){
										that.formObj.head_image = imgSrc
									}else if(type ==3){
										that.imgArr.push(imgSrc)
									}
									index++;
									index < length && downImgs();
								},
								fail:err=>{
									that.$api.msg('上传失败')
								}
							})							
						}
						// return false;
					},
					fail:err=>{
						that.$api.msg('上传失败')
					}
				});
			},
			// 删除图片
			clearImg(type){
				if(type == 1){
					this.formObj.images ='';
				}else if(type == 2){
					this.formObj.images1 ='';
				}
				
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			// 检验
			handleCheck(){
				if(!this.formObj.linkman){
					return this.$api.msg('请输入真实姓名')
				}
				let phoneReg = /^1[3456789]\d{9}$/
				if(!this.formObj.linkPhone){
					return this.$api.msg('请输入手机号码')
				}
				if (!phoneReg.test(this.formObj.linkPhone)) {
					this.$api.msg('请输入正确的手机号')
					return
				}
				if(!this.formObj.business_license){
					return this.$api.msg('请上传营业执照')
				}
				if(!this.formObj.head_image){
					return this.$api.msg('请上传店门照片')
				}
				if(this.imgArr.length == 0){
					return this.$api.msg('请上传产品图片')
				}
				return true;
			},
			submit() {
				if(this.handleCheck() !== true){
					return false;
				}
				this.formObj.product_image = this.imgArr.join(',')
				// console.log(JSON.stringify(this.formObj))
				this.$Request.request('/api/user_center/askForShop', 'POST', this.formObj).then(res => {
					if(res.status == 1){
						this.$api.msg('提交成功')
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},2000)
					}else {
						this.$api.msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#content-appli {
		padding-bottom: 60rpx;
	}
	.application {
		font-size: 14px;
		margin: 0 auto;
		width: 65%;
		background-color: #ff6600;
		color: #fff;
		text-align: center;
		height: 30px;
		line-height: 30px;
		border-radius: 5px;
	}

	.applicationlist {
		padding: 10px;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}
	
	.content-form {
		width: 100%;
		padding: 0rpx 32rpx 50rpx;
		box-sizing: border-box;
	}
	
	.apply-row {
		padding-top: 36rpx;
		.h6 {
			font-size: 24rpx;
			color: #92969E;
			line-height: 34rpx;
			margin-bottom: 22rpx;
		}
		.apply-in {
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #EFEFEF;
			input {
				font-size: 30rpx;
				color: #1D1E22;
			}
		}
		
		.apply-wrap {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			.apply-img {
				margin-right: 24rpx;
			}
		}
		
		.apply-img {
			width: 176rpx;
			height: 176rpx;
			border: 2rpx dashed #C0BEB9;
			.add-img {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 24rpx;
				color: #C0BEB9;
				.add-icon {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 16rpx;
				}
			}
			.imgs {
				width: 100%;
				height: 100%;
				padding: 12rpx;
				box-sizing: border-box;
				position: relative;
				.up-img {
					width: 100%;
					height: 100%;
				}
				.close-icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}
			}
		}
	}
	
</style>
